<template>
  <!-- 我的动态 -->
  <div class="movement-total">
      <!-- 头部 -->
    <mt-header :title="title" fixed>
        <router-link :to="to" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
        <router-link to="/user/movement/add"  slot="right" class="headusual-2">  
            <mt-button type="primary">发布</mt-button>     
        </router-link>    
      </mt-header>
      <!-- 动态列表 -->
        <div class="area-2">
            <div  v-if="dailys.length==0" class="no-text">
             <p class="title-left">暂无</p>
            </div>
            <div class="bleachery-item" v-for="(item,Pindex) in dailys" :key="Pindex">
                        <dl class="item-hd">
                            <dt>
                                 <router-link :to="'/m/'+item.Uid"><img :src="item.Headportrait"/></router-link> 
                            </dt>
                            <dd>
                                <p class="p-top">
                                <router-link :to="'/m/'+item.Uid"><span class="p-name">{{item.UserName}}</span></router-link> 
                                    <span class="p-tips">{{item.Tags}}</span>
                                </p>
                                <p class="p-bottom">{{item.AddTime}}</p>
                                <span class="spa_delete" @click="handleDaily(item.Id,Pindex)">删除</span>
                            </dd>
                        </dl>
                        <p class="p-sentence">{{item.Info}}</p>
                        <!-- 图片 -->
                        <!--  v-bind:data-original="img.replace('_ms.','_mx.')"  -->
                          
                         <div class="img-box">
                            <div v-for="(img,index) in item.ArrAtlas" :key="index" v-preview="img"  preview-title-enable="false" preview-nav-enable="false">
                                <img v-bind:data-original="img.replace('_ms.','_mx.')" v-bind:src="img" />
                            </div>
                            
                        </div>
                        <!-- 打赏 -->
                        <div class="reward-area">
                            <div>
                                <svg class="icon  icon-dashang" aria-hidden="true">
                                    <use xlink:href="#icon-dashang"></use>
                                </svg>
                                <span >打赏</span>
                            </div>
                            <div>
                            <div class="popup-2" v-show="item.Id==id">
                                <p class="first" @click="HandleLike(item.Id,Pindex)">
                                    <svg class="icon icon-jia" aria-hidden="true">
                                        <use xlink:href="#icon-zan"></use>
                                    </svg> 
                                    <span>赞</span>
                                </p>
                                <p @click="handleComment(item.Id,Pindex)">
                                    <svg class="icon icon-jia" aria-hidden="true">
                                        <use xlink:href="#icon-pinglun"></use>
                                    </svg> 
                                    <span>评论</span>
                                </p>
                            </div>
                                <img src="~@/assets/talk_logo.png" @click="popupAction(item.Id)"/>
                            </div>     
                        </div>
                        <!-- 点赞 -->
                        <div class="rewarder">
                            <p class="p-top"></p>
                            <p class="p-bottom">
                                <svg class="icon icon-jia" aria-hidden="true">
                                    <use xlink:href="#icon-zan"></use>
                                </svg>
                                <span v-for="(like,lindex) in item.LikeMembers" :key="lindex">{{like.uname}}</span>
                            </p>
                        </div>
                        <div class="talk-area">

                            <p class="p-ques" @click="answerSome(item.Id,comment.id,Pindex)" v-for="(comment,cindex) in item.Comments" :key="cindex">
                                <template v-if="comment.pid===0">
                                     <router-link :to="'/m/'+comment.uid" ><span class="name">{{comment.uname}}</span></router-link> ：
                                    <span>{{comment.info}}</span>
                                </template>
                               <template v-else>
                                     <router-link :to="'/m/'+comment.uid" ><span class="name">{{comment.uname}}</span></router-link>  &nbsp; 回复&nbsp;
                                    <span class="name">{{comment.pName}}</span>：{{comment.info}}
                                </template>
                            </p>
                        </div>
                    </div>
        </div>
        <!-- 回复某人的输入框  -->
     <div v-show="allLoaded" class="page-infinite-data">亲！别拉了我是有底线的</div>
      <div class="answer-to" v-show="popupAnswer">
         <input type="text" placeholder="有爱评论,说点好听的" v-model="commentText"/>
        <mt-button type="primary" @click="sendAnswer">发送</mt-button>
    </div>
    <!-- 遮罩层 -->
    <div class="hidder" @click="closeComment" v-show="commentShow"></div>

  </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
import {GetPageList,CommentAdd,CommentDel,DailyLike,Remove} from '@/api/daily';
export default {
    data(){
        return{
            title:'我的动态',
            to:'/user',
            flag:false,
            flag1:false,
            dailys:[],
            popupAnswer:false, //回复弹窗
            commentShow:false, //遮罩层
            loginId:0,

            commentText:'' ,//评论回复某人的输入框的值,
            commentdailyId:0,//评论的某个晒场id
            commentId:0,//回复时 某个评论的id
            commentCmd:"pl",//区别输入框是评论的还是回复的
            commentIndex:0,//评论索引

            pageIndex:1,
            totalPage:0,
            id:'1000',
            idx:'500',
            loading: false, //是否显示加载中
            allLoaded: false, //加载完毕
        }
    },
      created(){
        this.Initialization();
        $('.hidder').css('opacity','0');
        this.loginId=this.$store.state.userinfo.id;
        console.log(this.loginId);
    },
     updated(){
        this.$nextTick(function() {
            var totalH=$('.area-2').height()+52;
            $('.hidder').height(totalH);
        })
    },
    methods:{
        Initialization(){
            this.$indicator.open();
            setTimeout(() => {
                
                GetPageList(this.loginId,this.loginId,this.pageIndex,0,'own').then(res => {
                if (res.StatusCode === 200) {
                    this.dailys = res.Data.PagedList;
                    this.totalPage = res.TotalPage;
                    this.$indicator.close();
                }
                });
            }, 400);
        },
          HandleLike(id,index){
            if(this.loginId==0){
                  this.$toast("请先登录！！"); 
                   this.id=-1;
                  return false;
            }
             DailyLike(this.loginId,id).then(res=>{
              if(res.StatusCode===200){
                   this.$nextTick(function () {
                        this.dailys[index].LikeMembers = res.Data;
                         this.id=-1;
                         
                    });
              }
              else{
                     this.$toast(res.Data); 
                     this.id=-1;
              }
          });
        },
        //删除
        handleDaily(id,index){
          //Remove
             MessageBox.confirm('确定要删除该晒场，删除后不能找回?').then(action => {
            console.log(index);
              Remove(id).then(res=>{
                  if(res.StatusCode===200){
                      this.$toast("删除成功！");
                      this.dailys.splice(index,1);
                  }
              });
          });
        },
        // 评论操作
        handleComment(id,index){
            this.commentdailyId=id;
            this.commentCmd="pl";
            this.commentId=0;
           this.commentIndex=index;
            this.id=1000;
            this.flag=false;
            this.popupAnswer=true;

        },
        // 确认发送回复
        sendAnswer(){
            if(this.loginId==0){
                  this.$toast("请先登录！！"); 
                  return false;
            }
             this.commentText=  this.commentText.replace(/(^\s*)|(\s*$)/g, "");
            if(  this.commentText==""){
                      this.$toast("评论不能为空"); 
                      return false;
            }
          var data={
              uid:this.loginId,
              dailyId:this.commentdailyId,
              pid:this.commentId,
              info:this.commentText
          }
           CommentAdd(data).then(res=>{
            if(res.StatusCode===200){
                   this.$nextTick(function () {
                       this.dailys[this.commentIndex].Comments = this.dailys[this.commentIndex].Comments.concat(res.Data);
                       this.commentText="";
                       this.$toast("评论成功");
             })
            }
            });

            this.commentText="";
            this.popupAnswer=false;
            this.commentShow=false;
        },
        loadMore() {
            //分页加载更多
            if (this.pageIndex >= this.totalPage) {
                this.allLoaded = true;
                return;
            }
            this.loading = true;
               setTimeout(() => {
                GetPageList(this.loginId,this.loginId,this.pageIndex,this.selected,'own').then(res => {
                if (res.StatusCode === 200) {
                    this.dailys = res.Data.PagedList;
                    this.totalPage = res.TotalPage;
                    this.loading=false;
                }
                });
            }, 400);
        },
         // 评论打赏弹窗出现
        popupAction(index){
            console.log(1);
            this.flag=!this.flag;
            this.commentShow=true;
            if(this.flag){
                this.id=index;
            }
            else{
                this.id=1000;
            }
        },
        // 弹出回复某人
        answerSome(id,pid,index){
           this.commentdailyId=id;
           this.commentId=pid;
           this.commentIndex=index;
           this.commentCmd="hf",
           this.popupAnswer=!this.popupAnswer;
           this.commentShow=true;
        },
        //点赞操作
        handleZan(){
            this.id=1000;
            this.flag=false;
            this.commentShow=false;   
        },
        // 关闭回复弹框
        closeComment(){
            this.popupAnswer=false;
            this.commentShow=false;
            this.idx=500;
            this.flag=false;
            this.id=1000;
             $('.hidder').css('opacity','0');
        },
        // 对动态编辑操作
        edit(Id){
            this.idx=Id;
            this.commentShow=true;
             $('.hidder').css('opacity','0.5');
        },
        // 去编辑新动态
        goEdit(){
            this.$router.push('/user/movement/edit');
            $('.hidder').css('opacity','0');
        },
        // 删除动态
        handleDelete(){
            var that=this;
            $('.hidder').css('opacity','0');
           MessageBox.confirm('确定执行此操作?').then(action => {
              
          });
         that.commentShow=false;
         that.idx=500;    
    }
}
}
</script>

<style lang="scss" scoped>
.movement-total{
    height: 736px;
}
.spa_delete{
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 14px;
    color: #fd4f00
}
.mint-header {
  background: white;
  color: #282828;
  font-size: 18px;
  height: 52px;
  border-bottom: 2px solid #f4f4f4;
  .headusual-2 {
    width: 100px;
    text-align: right;
    .mint-button{
        background: #fd4f00;
        width: 60px;
        height: 26.6px;
        color:#fff;
        font-size: 14px;
    }
  }
}
.area-2{
    margin-top: 52px;
    .bleachery-item{
        padding-top:16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #f4f4f4; 
        background: #fff;
        border-top:10px solid #f4f4f4;      
        .item-hd{
            margin-left:12px;
            margin-right: 12px;
            display: flex;
            dt{
                width: 40px;
                height: 40px;
                img{
                    width: 40px;
                    height: 40px;
                    display: block;
                    border-radius: 50%;
                }
            }
            dd{
                width: 90%;
                margin-left:12px;
                position: relative;

                .p-top{
                    overflow: hidden;
                    
                    .p-name{
                        font-size: 14px;
                        color:#333333;
                        display:block;
                        float: left;
                    }
                    .p-tips{
                        padding: 1px 6px;
                        line-height: 18px;
                        border:1px solid #999999;
                        color:#999999;
                        border-radius: 9px;
                        margin-left: 8px;
                        display:block;
                        float: left;
                    }
                    .p-edit{
                        float: right;
                        display:block;
                        .icon{
                            font-size: 16px;
                        }
                       
                    }
                    
                   
                }
                .sanjiao{
                    position: absolute;
                    
                    top:20px;
                    right: 3px;
                    width: 0;
                    height: 0;
                    border-left:5px solid transparent;
                    border-right: 5px solid transparent;
                    border-bottom: 10px solid #fff;
                    z-index: 2000;
                }
                .popupBox{
                            position: absolute;
                            right: -5px;
                            top:30px;
                            width: 80px;
                            height: 60px;
                            z-index: 2000;
                            background: #fff;
                            border-radius: 5px;
                        ul{
                            li{
                                width: 80px;
                                height: 30px;
                                border-radius: 5px;
                                border-bottom: 1px solid #dcdcdc;
                                color:#999999;
                                padding-left:10px; 
                                display: flex;
                                align-items: center;
                                .icon{
                                    margin-right: 4px;
                                }
                            }
                        }
                    }
                .p-bottom{
                    color:#666666;
                }

            }
        }
        .p-sentence{
            margin-top:14px;
            color:#666666;
            font-size: 14px;
            line-height: 1.6;
            margin-left:12px;
            margin-right: 12px;
        }
        .img-box{
            display: flex;
            flex-wrap: wrap;
            margin-left: 7px;
            margin-right: 7px;
            margin-top: 12px;
            div{
                 width: 33.3%;
                 height: 33.3%;
                 margin-bottom: 7px;
                 display: flex;
                 justify-content: center;
            }
            img{
                width: 124px;
                height: 124px;
               
            }
        }
        .reward-area{
            margin-left:12px;
            margin-right: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 30px;
            div{
                display: flex;
                align-items: center;
                span{
                    font-size: 14px;
                    color:#666666;
                    margin-left: 10px;
                    i{
                        color:#fd4f00;
                        font-style: normal;
                        margin:0 2px;
                        font-weight: 600;
                    }
                }
                p{
                    display: flex;
                    align-items: center;

                }
            }
            .icon-dashang{
                color:#666666;
            }
            .popup-2{
                padding: 5px 15px;
                background: #333333;
                border-radius: 3px;
                justify-content: space-between;
                margin-right: 10px;
                z-index: 999;
                .first:after{
                    content: '|';
                    background: #282828;
                    margin: 0 5px;
                }
                span{
                    color:#ffffff;
                }
                .icon{
                    color:#ffffff;
                }

            }
            .icon{
                font-size: 16px;
            }
            img{
                width: 22.6px;
                height: 14px;
                z-index: 999;
            }
        }
        .rewarder{
            margin-left: 12px;
            margin-right: 12px;
            margin-top: 7px;
            .p-top{
                width: 0;
                height: 0;
                border-left:4px solid transparent;
                border-right: 4px solid transparent;
                border-bottom: 8px solid #f4f4f4;
                margin-left: 10px;
            }
            .p-bottom{
                background: #f4f4f4;
                padding: 6px 7px;
                color:#5f8fd8;
                display: flex;
                align-items: center;
                .icon{
                    margin-right: 7px;
                }
                span{
                    margin-right: 10px;
                }
            }
        }
        .talk-area{
            margin: 0px 12px;
            border-top: 1px solid #dcdcdc;
            background: #f4f4f4;
            padding: 6px 8px;
            .p-ques{
                margin-bottom:6px; 
            }
            .name{
                color:#5f8fd8;
            }
        }   

    }
}
// 回复某人弹窗
.answer-to{
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    input{
        width: 80%;
        padding-left: 5px;
    }
    .mint-button{
        width: 20%;
        background: #fd4f00;
        font-size: 14px;
    }

    
}

//遮罩层
.hidder{
    background: black;
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}


</style>
